<script setup>
import { ref,onMounted } from 'vue'
import { useRoute } from 'vue-router'; //引入路由接受参数
import router from "@/router/index.js"; //用于路由跳转
import { getBoatList } from "@/api/boat.js";  //引入方法api

const lc = ref(false)
const sw = ref(false)
const xw = ref(false)
const ws = ref(false)


const cfd = ref(false)
const mdd = ref(false)

//接受参数
const route = useRoute();
console.log(route)
const embark = ref(route.query.embark) //出发地
const destination = ref(route.query.destination) //目的地
const date = ref(route.query.date) //出发时间

const getCellStyle = () => {
  return {
    height: '80px', // 设置单元格高度
    lineHeight: '50px' // 使文本垂直居中
  };
}

const handleEdit = (row) => {
  router.push({
    path: '/Boatdingdan',
    query: {
      rowData: JSON.stringify(row) // 序列化对象
    }
  })
}

//初始化船只列表
const tableData=ref([])

//船只列表
const boatList= async ()=>{
  const res = await getBoatList(embark.value,destination.value, lc.value,sw.value, xw.value, ws.value, cfd.value, mdd.value)
  console.log(res)
  tableData.value=res.data.data
}
onMounted(()=>{
  boatList()
})
</script>


<template>
  <el-main>
    <div>
      <section class="search box-flex" style="position: static; top: 0px; width: auto; z-index: 1;">
        <div class="departure inputWrap">
          <label for="hotDptCity" class="label">出发</label>
          <input type="text" name="hotDptCity" id="hotDptCity" v-model="embark">
        </div>
        <div class="exchange">
          <span>换</span>
        </div>
        <div class="destination inputWrap">
          <label for="hotDesCity" class="label">到达</label>
          <input type="text" name="hotDesCity" id="hotDesCity" v-model="destination">
        </div>
        <div class="date inputWrap">
          <label for="selectDate" class="label">日期</label>
          <div><el-date-picker style="width: 230px;height: 34px;" v-model="date"  type="date" placeholder="选择出发日期"/></div>
        </div>
        <button @click="boatList()" class="btn">搜索</button>
      </section>
      <div>
        <section class="changeDate box-flex">
          <div class="arrowL">

          </div>
          <ul class="box-flex item-flex"></ul>
          <div class="arrowR"></div>
        </section>
        <section class="filter">
          <dl class="box-flex">
            <dt>出发时段</dt>
            <dd class="item-flex box-flex shrink">
              <div :class="{ unlimited:true, selected: !(lc||sw||xw||ws)}">
                <label>
                  <input type="checkbox">不限
                </label>
              </div>
              <div>
                <el-checkbox v-model="lc" label="凌晨 (00:00-06:00)" size="large" @change="boatList()" />  <!--点击后，执行方法-->
              </div>
              <div>
                <label>
                  <el-checkbox v-model="sw" label="上午 (06:00-12:00)" size="large" @change="boatList()" />
                </label>
              </div>
              <div>
                <label>
                  <el-checkbox v-model="xw" label="下午 (12:00-18:00)" size="large" @change="boatList()" />
                </label>
              </div>
              <div>
                <label>
                  <el-checkbox v-model="ws" label="晚上 (18:00-24:00)" size="large" @change="boatList()" />
                </label>
              </div>
            </dd>
          </dl>
        </section>
      </div>
    </div>
    <section class="listWrap">
      <el-table
          :data="tableData"
          :default-sort="{ prop: 'date', order: 'descending' }"
          :cell-style="getCellStyle"
          style="width: 100%;padding: 0px 50px 0px 50px"
      >
        <el-table-column prop="sendTime" label="发船时间" sortable width="180"/>
        <el-table-column prop="name" label="出发/到达地" width="180">
          <template #default="scope">
            <el-tag type="danger">{{ scope.row.beginningName }}</el-tag>
            <span style="color: #d9d9d9"> — </span>
            <el-tag type="primary">{{ scope.row.destinationName }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="time" label="预计耗时" width="180"/>
        <el-table-column prop="price" label="价格" width="180">
          <template #default="scope">
            <span style="color: #ff0000">￥{{ scope.row.price }}</span>
          </template>
        </el-table-column>

        <el-table-column prop="number" label="余票" width="180"/>"
        <el-table-column label="操作" width="140">
          <template #default="scope">
            <el-button type="primary" size="small" @click="handleEdit(scope.row)">预定</el-button>
          </template>
        </el-table-column>
      </el-table>
    </section>
  </el-main>
</template>


<style scoped lang="scss">
  :deep(.el-input__wrapper){
    box-shadow: none;
  }
  .el-main{
    background-color: #fff;
    box-shadow: 0 3px 15px 0 rgba(0, 0, 0, .1);
    width: 1200px;
    margin: 0 auto;
    padding: 0;
    button, input, select, textarea {
      vertical-align: middle;
      font-size: 100%;
      outline: 0;
      font-family: 'Microsoft YaHei', Arial, sans-serif;
    }
  }
  .search{
    background-color: #f3f3f3;
    padding: 15px 20px;
    margin-bottom: 30px;
    .date{
      display: flex;
    }
    >div.inputWrap{
        border: 1px solid #ccc;
        -webkit-border-radius: 2px;
        -moz-border-radius: 2px;
        border-radius: 2px;
        font-size: 16px;
        padding: 4px 0;
        background-color: #fff;
        label{
          display: inline-block;
          border-right: 1px solid #ccc;
          padding: 0 10px;
          vertical-align: middle;
          color: #999;
          line-height: 30px;
        }
        input{
          border: 0;
          height: 30px;
          line-height: 30px;
          padding: 0 15px;
          font-size: 15px;
          max-width: 160px;
          outline: none;
        }
      }
    .exchange{
      margin: 0 20px;
      span{
        display: inline-block;
        background-color: #12b8f6;
        color: #fff;
        width: 26px;
        height: 26px;
        line-height: 26px;
        font-size: 16px;
        text-align: center;
        -webkit-border-radius: 3px;
        -moz-border-radius: 3px;
        border-radius: 3px;
        position: relative;
        top: 7px;
        cursor: pointer;
      }
    }
    .exchange:before{
      content: ".";
      color: transparent;
      display: inline-block;
      width: 13px;
      height: 13px;
      position: relative;
      top: 10px;
      border-top: 2px solid #ccc;
      border-left: 2px solid #ccc;
      -webkit-transform: rotate(-45deg);
      -moz-transform: rotate(-45deg);
      -ms-transform: rotate(-45deg);
      -o-transform: rotate(-45deg);
      transform: rotate(-45deg);
    }
    .exchange:after{
      content: ".";
      color: transparent;
      display: inline-block;
      width: 13px;
      height: 13px;
      position: relative;
      top: 10px;
      border-top: 2px solid #ccc;
      border-left: 2px solid #ccc;
      -webkit-transform: rotate(135deg);
      -moz-transform: rotate(135deg);
      -ms-transform: rotate(135deg);
      -o-transform: rotate(135deg);
      transform: rotate(135deg);
    }
    .date,button{
      margin-left: 30px;
    }
    button{
      background-color: #ff6257;
      border: 0;
      color: #fff;
      font-size: 18px;
      padding: 0 50px;
      border-radius: 2px;
      cursor: pointer;
      width: 200px;
    }
  }
  .box-flex{
    display: flex
  }
  .changeDate{
    border: 1px solid #b6e8fb;
    border-bottom: 0;
    .arrowR, .arrowL{
      width: 40px;
      cursor: pointer;
      position: relative;
      border-bottom: 1px solid #12b8f6;
    }
    .arrowL:before,.arrowR:before{
      content: "";
      display: block;
      position: absolute;
      border: 10px solid transparent;
      top: 50%;
      margin-top: -10px;
    }
    .arrowL{
      border-right: 1px solid #b6e8fb;
    }
    .arrowR{
      border-left: 1px solid #b6e8fb;
    }
    .arrowL:before{
      border-right: 10px solid #12b8f6;
    }
    .arrowR:before{
      border-left: 10px solid #12b8f6;
      right: 0;
    }
    .item-flex{
      -webkit-box-flex: 1;
      -webkit-flex: 1;
      flex: 1;
    }
    ul{
      background-color: #edfaff;
    }
  }
  .filter{
    font-size: 14px;
    padding: 20px;
    margin-top: 20px;
    position: relative;
    dl{
      position: relative;
    }
    dl:not(:last-child) {
      margin-bottom: 10px;
    }
    dt{
      font-size: 15px;
      width: 120px;
      line-height: 30px;
    }
    dd{
      -ms-flex-wrap: wrap;
      -webkit-flex-wrap: wrap;
      flex-wrap: wrap;
      line-height: 30px;
      .shrink{
        height: 30px;
        overflow: hidden;
      }
      >div{
        width: 154px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        .el-checkbox{
          height: 100%;
        }
      }
      .unlimited{
        position: absolute;
        left: 70px;
        width: 64px;
        transform: scale(.8);
        transform-origin: left;
        input{
          opacity: 0;
          width: 0;
          height: 0;
          position: absolute;
        }
      }
      .unlimited.selected{
        label{
          color: #fff;
          background-color: #12b8f6;
          border-radius: 3px;
          font-size: 12px;
          padding: 2px 4px;
        }
      }
    }
  }
</style>